<template>
    <div class="container">
        <ul class="menu">
            <li v-for="item in currMenus">
                <router-link :to="baseMenu + item.path" v-if="!item.children">{{ item.label }}</router-link>
                <template v-else>
                    <p class="menubar">{{item.label}}</p>
                    <ul>
                        <li v-for="sonItem in item.children">
                            <router-link :to="baseMenu+sonItem.path">{{sonItem.label}}</router-link>
                        </li>
                    </ul>
                </template>
            </li>
        </ul>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
import { baseMenu, getCurrentMenus } from "@/grants/menu.js";
import {getCurrentUserRoutes} from "@/router/grantRoutes.js";

const currMenus = getCurrentMenus();

getCurrentUserRoutes();


</script>

<style lang="css" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.menu {
    width: 200px;
    height: 100%;
    border-right: 1px solid #ccc;
}

.menu li {
    line-height: 40px;
    text-align: center;
}

.container .content {
    flex: 1;
    height: 100%;
}

.menubar {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    color: white;
}

.menubar li {
    flex: 1;
    text-align: center;
}

.menubar li a {
    color: #fff;
}
</style>
